<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
    crossorigin="anonymous"></script>
    <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
   <link rel="stylesheet" href="css/top_nav.css">
   <link rel="stylesheet" href="css/car.css">
<title>购物车</title>
</head>
<body>
<!--顶部导航栏-->
  <!-- 顶部图片 -->
  <img src="./img/top1.png" style="width: 100%;">
  <!-- 黑色导航栏 -->
  <div class="nav_black" name="top">
      <div style="width: 80%; margin: 0 auto;">
          <div style="float: left; width: 30%;">
              <nav id="nav_list" class="nav">
                  <a class="nav-link" href="#">考拉欢迎你！</a>
                  <a class="nav-link" href="login.html">登录</a>
                  <a class="nav-link" href="#">免费注册</a>
                  <a class="nav-link" data-toggle="popover" data-placement="bottom" href="#">手机考拉</a>
              </nav>
          </div>
          <div style="float: right; width: 70%;">
              <ul id="nav_sec" class="nav justify-content-end">
                  <li class="nav-item">
                      <a class="nav-link active" href="#">每日签到</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">我的订单</a>
                  </li>
                  <li id="nav_sec" class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">个人中心</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">我的优惠券</a>
                          <a class="dropdown-item" href="#">我的红包</a>
                          <a class="dropdown-item" href="kaolabean.html">我的考拉豆</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">账号管理</a>
                          <a class="dropdown-item" href="#">我的实名认证</a>
                          <a class="dropdown-item" href="shoppingaddress.html">我的收货地址</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">我收藏的商品</a>
                          <a class="dropdown-item" href="#">我关注的品牌</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">售后管理</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">客户服务</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">联系客服</a>
                          <a class="dropdown-item" href="#">帮助中心</a>
                          <a class="dropdown-item" href="#">知识产权保护</a>
                          <a class="dropdown-item" href="#">规则中心</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">充值中心</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">话费充值</a>
                          <a class="dropdown-item" href="#">游戏充值</a>
                          <a class="dropdown-item" href="#">AppStore充值卡</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">消费者权益</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="consumer.html">消费者告知书</a>
                      </div>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button"
                          aria-haspopup="true" aria-expanded="false">更多</a>
                      <div class="dropdown-menu">
                          <a class="dropdown-item" href="#">收藏本站</a>
                          <div class="dropdown-divider"></div>
                          <a class="dropdown-item" href="#">新浪微博</a>
                          <a class="dropdown-item" href="#">微信公众号</a>
                          <a class="dropdown-item" href="#">招商合作</a>
                      </div>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">视频内容</a>
                  </li>
              </ul>
          </div>
      </div>
  </div>
  <!-- 网易考拉logo、搜索框、购物车按钮 -->
  <div id="top" class="component_thr" style="width: 100%; height: 100px;display: flex;">
      <!-- logo -->
      <div style="text-align: right; position: relative;right: 20px;">
          <a href="index.html"><img style="height: 100%;" src="./img/wykl_logo.png"></a>
      </div>
      <!-- 搜索框 -->
      <div style="height: 100%;">
          <div id="search" class="input-group mb-3">
              <input type="text" class="form-control" placeholder="面膜" aria-label="面膜"
                  aria-describedby="button-addon2">
              <div class="input-group-append">
                  <button id="btn1" class="btn btn-outline-secondary" type="button" id="button-addon2"><img
                          style="height: 20px;" src="img/top_search.png"></button>
              </div>
          </div>
      </div>
      <!-- 购物车按钮 -->
      <div>
          <button id="btn2" onclick="window.location.href='car.html'"><img style="margin: 10px; height: 20px;"
                  src="img/shop_car1.png">购物车&nbsp;&nbsp;&nbsp;</button>
      </div>
  </div>



<!--主体部分-->
    <p class="imgs" style="text-align: left;">
       <!--文本内容-->
        <span><img src="./img/car/car.png"> <font style="margin-left: 10px;">购物车里空空如也，赶紧去&nbsp;&nbsp;<a href="index.html"><font color="#F5345E">逛逛吧></font></font></a></br>
            <font style="margin-left: 10px;">或者您可以先进行&nbsp;&nbsp;<a href="login.html"><font color="#F5345E">登录></font></font></a></span>
        </p>

    <!--猜你喜欢-->
    <!-- 主体段落 -->
    <p><strong>猜你喜欢</strong><font color="#999">根据你的浏览记录推荐的商品</font></p><br/>
    <!-- 商品列表 -->
    <div class="shop">
 <div id="im" class="animate__bounceOut" style="margin-left: 15%;">
        <img src="img/car/fangshai.jpg" width="204">
        ESTĒE LAUDER 雅诗兰黛 特效防晒霜 250毫升<br/>
        <font color="#E31436">¥529</font><br/>
       <font color="#999"> 893人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/flower.jpg" width="204">
        SHISEIDO 资生堂 新一季鲜花 500g<br/>
        <font color="#E31436">¥426</font><br/>
       <font color="#999"> 556人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/jiaonang.jpg" width="204">
        CHANGXING 长兴牌维生素E软胶囊 <br/>
        <font color="#E31436">¥223</font><br/>
       <font color="#999"> 2331人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/kouhong.png" width="204">
        Dior迪奥 #999哑光传奇红 经典正红 烈艳蓝金唇膏口红 <br/>
        <font color="#E31436">¥625</font><br/>
       <font color="#999"> 1223人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/mianmo.jpg" width="204">
        FANCL 芳珂 无添加净化面膜 12张 套装<br/>
        <font color="#E31436">¥129</font><br/>
       <font color="#999"> 893人已评价</font>
    </div>
  </div>
    <br/><br/> 

    <!--大家都在买-->
    <!-- 主体段落 -->
    <p><strong>大家都在买</strong><font color="#999">全网最热门的商品推荐</font></p><br/>
    <!-- 商品列表 -->
    <div class="shop">
    <div id="im" class="animate__bounceOut" style="margin-left: 15%;">
        <img src="img/car/milk.jpg" width="204">
        ESTĒE LAUDER 雅诗兰黛 DW洗面奶<br/>
        <font color="#E31436">¥137</font><br/>
       <font color="#999"> 3213人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/skirt.jpg" width="204">
        SHISEIDO 资生堂 春夏新款连衣裙 <br/>
        <font color="#E31436">¥326</font><br/>
       <font color="#999"> 1356人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/water.jpg" width="204">
        BIO ISLAND 佰澳朗德 美颜补水  洁面乳<br/>
        <font color="#E31436">¥133</font><br/>
       <font color="#999"> 1431人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/water1.jpg" width="204">
        MEDIHEAL 美迪惠尔 洁面乳 泡沫绵密 温和不刺激<br/>
        <font color="#E31436">¥75</font><br/>
       <font color="#999"> 2023人已评价</font>
    </div>
    <div id="im" class="animate__bounceOut">
        <img src="img/car/water2.jpg" width="204">
        EltaMD 氨基酸泡沫卸妆洁面乳 207毫升<br/>
        <font color="#E31436">¥99</font><br/>
       <font color="#999"> 1393人已评价</font>
    </div>
  </div>
  
  <!-- 右边导航栏 -->
<div class="nav_right">
   <a href="#top">返回顶部</a>
  </div>

<!--底部导航-->
<div class="bottom_nav" id="te">
 <div>
   <img class="bottom_img" src="img/car/bottom_nav.png">
 </div>
 <div class="bottom_text">
 <ul class="clearfix">
 <!-- 底部无序列表（底部下半部分小盒子） -->
   <li class="first">
    <!-- 底部考拉海购 -->
    <img class="bottom_kaola" src="img/car/kaola.png">
    <div>
      <!-- 关注我们 -->
      <span class="label">关注我们</span>
      <img class="weibo" src="img/car/weibo.png">
      <img class="wechat" src="img/car/wechat.png">
      </div>
   </li>
   <!-- 无序列表列表项 -->
   <li>
  <dl>
    <dt>
      <em>
        考拉保障
      </em>
    </dt>
    <dd>假一赔十</dd>
    <dd>廉正举报</dd>
  </dl>
   </li>
   <li>
    <dl>
      <dt>
        <em>
          新手指南
        </em>
      </dt>
      <dd>购物流程</dd>
      <dd>支付方式</dd>
      <dd>通关税费</dd>
      <dd>常见问题</dd>
    </dl>
     </li>
     <li>
      <dl>
        <dt>
          <em>
           售后服务
          </em>
        </dt>
        <dd>售后政策</dd>
        <dd>退货流程</dd>
        <dd>特色服务</dd>
        <dd>联系客服</dd>
      </dl>
       </li>
       <li>
        <dl>
          <dt>
            <em>
              物流配送
            </em>
          </dt>
          <dd>配送方式</dd>
          <dd>配送服务</dd>
          <dd>运费标准</dd>
          <dd>物流跟踪</dd>
        </dl>
         </li>
         <li>
          <dl>
            <dt>
              <em>
                商家服务
              </em>
            </dt>
            <dd>招商合作</dd>
            <dd>销售联盟</dd>
            <dd>商家成长</dd>
          </dl>
           </li>
           <li>
            <dl>
              <dt>
                <em>
                  关于我们
                </em>
              </dt>
              <dd>联系我们</dd>
              <dd>CEO邮箱</dd>
            </dl>
             </li>
      <!-- 二维码块 -->
             <li class="last">
               <img src="img/car/QRcode.png">
               <span class="download">扫描下载手机版</span>
             </li>
 </ul>
 </div>
  </div>


<!-- 底部 -->
    <div class="foot">
      <div id="scrif">
          <span class="remark">增值电信业务经营许可证：浙B2-20160288</span>
          <span class="remark">（浙）网械平台备字[2018]第00007号</span>
          <span class="remark">阿里巴巴版权所有C2003-2021</span>
          <a style="margin-left: 20px;" href="https://you.kaola.com/common/page.html?key=Privacy_policy" rel="nofollow" target="_blank" title="隐私政策" _pi="1">隐私政策</a>
          <span class="sep" >- </span>
          <a href="https://www.kaola.com/" target="_blank" title="考拉海购" data-param="zn=footer" >考拉海购</a>
          <br>
          <span class="remark" >网络文化经营许可证：浙网文（2020）4340-180号</span>
          <span class="remark" >浙江省网络食品销售第三方平台提供者备案：浙网食A33010006</span>
          <a target="_blank" href="https://kaola-haitao.oss.kaolacdn.com/6df8bb71-a013-41d4-8491-548215da176d.png" >
              <span style="margin: 0px 0px 0px 20px;" >网络第三方平台规范进口冷链食品承诺函</span>
          </a>
          <br>
      <!-- 警徽 -->
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010802002216&no_protofix"><img src="./img/bottom_photo/警徽.png" id="police"></a>
          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010802002216&amp;no_protofix" ><span style="margin: 0px 0px 0px 5px;" >
              浙公网安备 33010802002216号</span>
          </a>
          <a href="javascript:void(0);" style="text-decoration: none; cursor: auto;">
              <span style="margin: 0px 0px 0px 20px;" >互联网药品信息服务资格证书编号（浙）-2017-0027</span> 
          </a>
          <a target="_blank" href="http://beian.miit.gov.cn">
              <span style="margin: 0px 0px 0px 20px;">浙ICP备16011229号-6</span> 
          </a>
          <span class="remark" >
              <a href="//pages.kaola.com/pages/activity/Businessentity.shtml" rel="nofollow" target="_blank" title="自营经营者信息" >自营经营者信息</a>
          </span>
       <!-- 底部图片 -->
          <div class="bottombarest" >
              <img src="./img./bottom_photo/可信网站.png" alt="可信网站" _pi="1">
              <img src="./img/bottom_photo/电子营业执照.png">
          </div>
      </div>
  </div> 
</body>
</html>